<template>
	<view class="bg">
		<xl-navbar title="ImageUpload图片上传" fixed shadow></xl-navbar>
		<view class="content">
			<view class="title">基础样式</view>
			<xl-image-upload ref="uploader"></xl-image-upload>
			<view class="title">设置宽高，单位rpx、图标大小、提示内容</view>
			<xl-image-upload :width="200" :height="200" iconSize="26" tip="上传图片"></xl-image-upload>
			<view class="title">关闭裁剪编辑功能</view>
			<xl-image-upload :editEnable="false"></xl-image-upload>
			<view class="title">默认图片：http打头路径图片不再上传</view>
			<xl-image-upload url="/static/imgs/pic.png"></xl-image-upload>
		</view>
		<view class="btn">
			<xl-button text="上传" type="primary" @click="upload"></xl-button>
		</view>
	</view>
</template>

<script setup>
	import { ref, onMounted, computed } from "vue";
	
	const uploader = ref()
	
	function upload(){
		uploader.value.upload()
	}
</script>

<style lang="scss" scoped>
	.btn{
		width: 100%;
		padding: 10px 30px;
		box-sizing: border-box;
		position: fixed;
		bottom: 0;
	}
</style>
